<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from 'vue'
import { useForm } from '@/composeAPI/useForm'
import $tool from '@/utils/tool'
import $element from '@/utils/element'

import _ from 'lodash'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => false
  },
  width: {
    type: [String, Number],
    default: () => '50%'
  },
  direction: {
    type: String,
    default: () => 'rtl'
  },
  wrapperClosable: {
    type: Boolean,
    default: () => true
  },
  showHeader: {
    type: Boolean,
    default: () => true
  },
  showFooter: {
    type: Boolean,
    default: () => false
  },
  showClose: {
    type: Boolean,
    default: () => true
  },
  title: {
    type: String,
    default: () => ''
  },
  height: {
    type: String,
    default: () => '400px'
  },
  rules: {
    type: Object,
    default: () => {}
  },
  item: {
    type: Object,
    default: () => {}
  },
  rowDirection: {
    type: String,
    default: () => 'horizontal'
  },
  rowNum: {
    type: Number,
    default: () => 3
  },
  labelWidth: {
    type: String,
    default: () => 'w-[85px]'
  },
  labelAlign: {
    type: String,
    default: () => 'left'
  },
  contentStyle: {
    type: String,
    default: () => ''
  },
  type: {
    type: String,
    default: () => 'add'
  },
  columns: {
    type: Array as any,
    default: () => []
  }
})

const form: any = ref(null)

const emit = defineEmits(['update:modelValue', 'save'])

const { state, showType } = useForm()

const init = async () => {
  state.loading = false
  state.type = _.cloneDeepWith(props.type)
  state.rules = _.cloneDeepWith(props.rules)
  state.show = _.cloneDeepWith(props.modelValue)
  state.currentData = _.cloneDeepWith(props.item)
}

const reset = () => {
  nextTick(() => {
    form.value.reset()
  })
}

const clear = () => {
  nextTick(() => {
    form.value.clear()
  })
}

const close = () => {
  reset()
  clear()
  emit('update:modelValue', false)
}

const handleClose = async () => {
  const res = $tool.isObjectValueEqual(props.item, form.value.state.currentData)
  if (res) {
    close()
  } else {
    const r = await $element.confirm('确定放弃填写吗? 放弃后数据将不会被保存!')
    if (r) {
      close()
    }
  }
}

const save = async () => {
  await form.value.ruleForm.validate(async (valid: any) => {
    if (valid) {
      state.loading = true
      emit('save', form.value.state.currentData)
      console.log()
    }
  })
}

onMounted(() => {
  init()
})

watch(
  () => props.modelValue,
  () => {
    init()
  }
)

defineExpose({
  state
})
</script>

<template>
  <drawer-box
    v-model="state.show"
    :title="showType() + props.title"
    :width="props.width"
    :showHeader="showHeader"
    :direction="props.direction"
    :wrapperClosable="props.wrapperClosable"
    :showFooter="props.showFooter"
    :showClose="props.showClose"
    :beforeClose="handleClose"
  >
    <template #btn>
      <slot name="header"></slot>
      <el-button v-if="!props.showFooter" @click="reset">重置</el-button>
      <el-button
        type="primary"
        v-if="!props.showFooter"
        @click="save"
        :loading="state.loading"
      >
        保存
      </el-button>
    </template>

    <description-form
      ref="form"
      :labelAlign="props.labelAlign"
      :labelWidth="props.labelWidth"
      :contentStyle="props.contentStyle"
      :rowNum="props.rowNum"
      :item="state.currentData"
      :columns="props.columns"
      :rules="state.rules"
      v-if="state.show"
    />

    <template #footer v-if="props.showFooter">
      <div class="flex flex-row items-center justify-end">
        <slot name="footer"></slot>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="save" :loading="state.loading"
          >保存</el-button
        >
      </div>
    </template>
  </drawer-box>
</template>

<style lang="scss" scoped>
.top {
  display: table-cell;
  vertical-align: text-top;
}
</style>
